<template>
	<view>
		<view style="width: 706rpx;margin-top: 20rpx;margin-left: 21rpx;display: flex;justify-content: space-evenly;flex-wrap: wrap;">
			<view class="article" :class="select==i?'active': ''" v-for="(item,i) in payList" :key="i"
				@click="paySelect(i,item.money)">
				<image src="../../../static/me/duihao.png" mode=""
					style="position: absolute;top: 0;z-index: 99999;left: 10rpx;width: 50rpx;height: 50rpx;"
					v-show="duihaoShow==i"></image><!--  -->
				<view class="flag flag-left" v-show="select==i" style="color: #FFFFFF;"></view>
				<view style="margin-top: 80rpx;">
					<text style="font-size: 28rpx;display: inline-block; position: relative;top: -16rpx;">¥</text>
					<text style="font-size: 50rpx;">{{item.money}}</text>
				</view>
			</view>
			<!-- 自定义充值模态框 -->
			<prompt :visible.sync="promptVisible" :placeholder="userpay" :defaultValue="userpay" @confirm="clickPromptConfirm"
				mainColor="#e74a39">
				<!-- 这里放入slot内容-->
			</prompt>
			<view class="balance_mar" v-show="mar">* 金钻充值比例为：1金钻=1.00元</view>
			<view class="balance_text">充值方式</view>
			<radio-group class="radio_list">
				<label>
					<radio class="radio_type"/>
					<text>支付宝</text>
					<image src="../../../static/me/alipay.png" mode=""></image>
				</label>
				<label>
					<radio class="radio_type"/>
					<text>微信</text>
					<image src="../../../static/me/wxzf.png" mode=""></image>
				</label>
				<label>
					<radio class="radio_type"/>
					<text>云闪付</text>
					<image src="../../../static/me/ysf.png" mode=""></image>
				</label>
			</radio-group>
			<button class="btn" type="default">立即充值</button>
		</view>
	</view>
</template>
<script>
	import Prompt from "../../../uni_modules/uni-modal/components/zz-prompt/index.vue"
	export default {
		components: {
			Prompt
		},
		data() {
			return {
				promptVisible: false,
				payList: [{
						money: 50
					},
					{
						money: 100,
					},
					{
						money: 500
					},
					{
						money: 1000
					},
					{
						money: 3000
					},
					{
						money: "自定义"
					}
				],
				// 对号控制显示
				duihaoShow: 0,
				// 边框
				border: false,
				select: 0,
				myShow: false,
				mar: false,
				type: 'number',
				userpay: '',
			}
		},
		onLoad(parameter) {
			if(parameter.parameter == 1){
				this.mar=false
				uni.setNavigationBarTitle({
					title: '余额充值'
				})
			}else if(parameter.parameter == 2){
				this.mar=true
				uni.setNavigationBarTitle({
					title: '金钻充值'
				})
			}
		},
		methods: {
			// 获取自定义内容
			clickPromptConfirm(val) {
				console.log(val)
				this.promptVisible=false
			},
			//充值类型选中
			paySelect(i, money) {
				if (money == '自定义') {
					console.log('自定义')
					this.promptVisible=true
					this.select = i
					this.duihaoShow = i
				} else {
					this.promptVisible=false
					this.select = i
					this.duihaoShow = i
				}

			},
		}
	}
</script>

<style>
	.article {
		width: 226rpx;
		height: 210rpx;
		margin-top: 10rpx;
		position: relative;
		overflow: hidden;
		text-align: center;
		border-radius: 10rpx;
		border: 4rpx #FFFFFF solid;
	}

	.article .flag {
		position: absolute;
		/*绝对定位*/
		height: 70rpx;
		line-height: 88rpx;
		text-align: center;
		width: 166rpx;
		background-color: #21201D;
		color: #fff;
	}

	.article .flag-left {
		/* -moz-transform: rotate(90deg); */
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		-webkit-transform: rotate(90deg);
		transform: rotate(-45deg);
		left: -58rpx;
		top: -12rpx;
	}

	.active {
		border: 4rpx #21201D solid;
		color: #FCA022;
	}
	.balance_text{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #21201D;
		opacity: 1;
		text-align: left;
		display: block;
		margin-top: 57rpx;
		width: 706rpx;
	}
	.balance_mar{
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #21201D;
		opacity: 0.35;
		text-align: left;
		display: block;
		margin-top: 57rpx;
		width: 706rpx;
	}
	.radio_list image{
		width: 50rpx;
		height: 50rpx;
		float: left;
		margin-right: 21rpx;
	}
	.radio_list text{
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #21201D;
		opacity: 1;
	}
	.radio_list radio{
		transform: scale(0.7);
		float: right;
	}
	.radio_list label{
		display: block;
		width: 706rpx;
		margin-top: 50rpx;
	}
	.btn{
		width: 699rpx;
		height: 79rpx;
		background: linear-gradient(206deg, #FCCA22 0%, #FFE246 100%);
		opacity: 1;
		border-radius: 39rpx;
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #21201D;
		text-align: center;
		line-height: 79rpx;
		position: fixed;
		bottom: 14rpx;
	}
</style>
